<template>
  <div class="album-body">
    <div class="album-box" v-for="item in albumList" :key="item.id">
      <div class="box-img">
        <el-image :src="item.picUrl" alt="" lazy>
          <div slot="placeholder" class="image-slot">
            <div class="dot" v-loading="loading"></div>
          </div>
        </el-image>

        <a href="javascript:;" class="img-top"></a>
        <a href="javascript:;" class="play" @click="albumPlay(item.id)"></a>
      </div>
      <!-- 文字 -->
      <p class="title">
        <!-- 插槽 -->

        <a href="javascript:;" style="font-size: 14px">{{ item.name }}</a>
      </p>

      <p class="title-two">
        <!-- 插槽 -->

        <a href="javascript:;">{{ item.artist.name }}</a>
      </p>
    </div>
  </div>
</template>

<script>
import { getrecommendTop, getSongURL } from '@/api/api.js'
export default {
  name: 'AlbumBody',
  props: {
    albumList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      loading: true
    }
  },
  methods: {
    async albumPlay(id) {
      try {
        const res = await getrecommendTop(id)
        let songlist = []
        for (let item of res.privileges) {
          const { data: song } = await getSongURL(item.id)
          songlist.push(song[0].url)
        }
        this.$store.commit('savaSongURL', [])
        this.$store.commit('savaSongURL', songlist)
      } catch (error) {
        this.$message.error(`不给你听`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.album-body {
  width: 100%;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  .album-box {
    margin-top: 20px;
    width: 153px;
    height: 178px;
    a {
      text-decoration: none;
    }
    .box-img {
      width: 153px;
      height: 130px;
      position: relative;
      margin-bottom: 7px;

      .play {
        position: absolute;
        right: 32px;
        bottom: 6px;
        border-radius: 50%;
        display: block;
        width: 28px;
        height: 28px;
      }
      &:hover .play {
        background: url('https://s2.music.126.net/style/web2/img/iconall.png?954741fac942e8467a183eb9c159dc35')
          no-repeat;
        background-position: 0 -140px;
      }
      .el-image {
        display: block;
        width: 130px;
        height: 130px;
        .image-slot {
          width: 100%;
          height: 100%;
          .dot {
            width: 100%;
            height: 100%;
          }
        }
      }
      .img-top {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 153px;
        height: 130px;
        background: url('https://s2.music.126.net/style/web2/img/coverall.png?2ac4f0b43a8fc79457fe419254b2f516')
          no-repeat;
        background-position: 0 -845px;

        // z-index: 999;
      }
    }
  }
  .title a {
    display: block;
    color: black;
    font-size: 13px;
    width: 153px;
    margin-top: -2px;
    padding-bottom: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &:hover {
      text-decoration: underline;
    }
  }
  .title-two a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #666;
    display: block;
    width: 153px;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
